<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <!-- 
    zepto
    1 语法类似jquery 移动端的jq
    2 模块化
      1 好处 按需加载
      2 不好 引文件很麻烦  -> 解决  定制zepto!! 了解- node 定制 
    3 专门针对移动端
    
   -->
   <div></div>
   <script src="./src/zepto.js"></script>
   <!-- this.bind is not a function -->
   <!-- 事件模块 -->
   <script src="./src/event.js"></script>
   <!-- 触屏事件模块 -->
   <script src="./src/touch.js"></script>
   <!-- 动画模块 -->
   <script src="./src/fx.js"></script>
   <!-- 动画扩展模块 -->
   <script src="./src/fx_methods.js"></script>
   
   <script>
    //  隐藏div
    //  $("div").hide().show();

    // 动画 $(...).animate is not a function
    // $("div").animate({"opacity":0},1000);

    // $("div").fadeOut();

    // tap swipe 
    // $("div").on("tap",function () {
    //   console.log("zepto tap");
      
    // })
     
     $("div").tap(function () {
       console.log(123);
       
     })
   </script>
</body>

</html>